<template>
  <div class="sub-category">
    <div v-for="(item,index) in lists" :key="index">
      <p style="padding-left: 0.22rem;">{{item.category.name}}</p>
      <van-grid :gutter="10" :column-num="3">
      <van-grid-item
          v-for="(im,i) in item.child"
          :key="i"
          :icon="im.category.logo.mainPic"
          :text="im.category.name"
          />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getCategory } from '@/api/category'

export default {
  name: 'SubCategory',
  data() {
    return {
      code: Number(this.$route.params.id),
      lists: [],
    }
  },
  created() {
    getCategory(this.$route.params.id = '000036').then(item => {
      this.lists = item.data
      console.log(item.data)
    })
  },
  watch: {
    // 监视$route的变化
    $route: function(val, oldVal) {
      this.code = Number(this.$route.params.id)
      getCategory(this.$route.params.id).then(item => {
        this.lists = item.data
      })
    },
  },
}
</script>

<style lang="less" scoped>
  .sub-category{
    overflow-y: auto;
  }
  .van-grid{
    width: 285px;
  }
  /deep/.van-icon__image{
    width: 51px;
    height: 51px;
  }
</style>
